CSS stands for Cascading Style Sheets. The documents written in HTML are formatted and 
presented using CSS. There are many features in HTML and CSS is the most popular addition 
to it. Rather than changing the web page itself, with CSS, only the styles need to be changed, 
which means fewer chances to the overall code. Further, HTML contained a lot of repeated 
code for each web page, which can be put in a common file with CSS and used across web 
pages. CSS contains — selector and declaration block. A declaration block consists of 
property-value pairs. Example, 


Htitle 


Here, title is the selector and the declaration block is the entire thing inside the curly braces. 
Saved as - .css file 


CSS Cheat sheet 


1. Font 
Property Values Example 
font-style normal/italic/inherit/oblique font-style: normal 
font-variant normal/inherit/small-caps font-variant: small-caps 


font-weight normal/bold/bolder/lighter/100-900/inherit — font-weight:bold 


font-size ?px/? %/small/medium/large font-size: large font-size :5 
font-family — verdana/calibri.. etc... font-family: verdana 
2. Text 
Property Values Example 
text-align left/right/center/justify text-align: justify; 
letter spacing normal/length/?% letter spacing : 3%; 
Text-outline None/length/color Text-outline: red 
word-wrap normal/length word-wrap: normal; 
direction Itr/rtl/inherit Direction: Itr; 


text-wrap normal/unrestricted/none text-wrap: normal 


text-indent 2%/?Dx 
word-spacing normal/?%/?px 


text-transform none/uppercase/lowercase/capitaliz 
e 


text-emphasis none/dot/open/filled/circle/triangle 


text-justify auto/distribute/inter-word 


3. User Interface 


Property Values Example 
appearance — apply platform normal | inherit | [icon | window | desktop | appearance: 
specific styling work-space | document | tooltip | dialog | password; 
button | push-button | hyperlink | radio-button 
| checkbox | menu-item | tab | menu | 
menubar | pull-down-menu | pop-up-menu | 
list-menu | radio-group | checkbox-group | 
outline-tree | range | field | combo-box | 
signature | password] 
cursor auto | crosshair | default | pointer | move | -help { cursor: 
e-resize | neresize | nw-resize | n-resize | help; } 
se-resize | sw-resize | swresize | s-resize | 
w-resize | text | wait | help 
nav-index - specifies the auto | inherit number nav-index: 1; 
sequential navigation order 
of current element. Similar 
to tab index in html. Values 
can be auto or a positive 
number representing the 
navigation order. First value 
is 1. 
nav-up auto | inherit <id> [current | root | nav-up: auto; 


text-indent: 2% 
word-spacing: normal 


text-transform: lowercase 


text-emphasis: filled 


text-justify:distribute 


<target-name> auto (browser decides where 
to navigate to)/ id (specific ID to be navigated 
to)/ target_name (target frame to navigate 
to)/inherit (value computed based on 
element’s parent; root or current) 


nav-down 


nav-left 


nav-right 


resize 


icon 
4. Backgrounds 


Property 


background-size 


background-image 


background-repeat 


background-attachment 


background-color 


background-position 


background-origin 


auto | inherit <id> [current | root | 
<target-name> 


auto | inherit <id> [current | root | 
<target-name> 


auto | inherit <id> [current | root | 
<target-name> 


none | both | horizontal | vertical | inherit 


auto | inherit url 


Values 


auto/cover/?px/?% 


url/none 


no-repeat/repeat-x/repeat-y/repeat 


fixed/scroll 


color/transparent 


can be any position from different 
combinations like top left, top right, top 
center. Same with bottom. can be 
mentioned in terms of position x-% and 
y-% 


the starting point of the background 


nav-down: 
#b2; 


nav-left: #b1; 


nav-right: #b2; 


resize: 
horizontal; 


icon: 
url(“like.png”); 


Example 


background 
-size: cover 


background 
-image: 
none 


background 
-repeat: 
repeat 


background 
-attachment 
: fixed 

background 


-color: white 


background 
-position: 
top-left; 


background 
-origin: 0; 


background-clip - lets you control 
how much of the background 
image should extend beyond the 
element's content or padding 


5. Borders 
Property 


border-width 


border-style 


border-color 


border-left: border-left-color 
border-left-width 


border-right: border-right-color 
border-right-width 


border-top: border-top-width 
border-top-color 


content-box/padding-box/border-box/no-cli 
p/?%/? px 


Values 


thin/thick/medium/? px 


none/dashed/dotted/inset/double/sol 
id 


name of the color 


background 
-clip: no-clip 


Example 


border-widt 
h: medium 
border-widt 
h: 20px 


border-sty| 
e : dotted 


border-col 
or: black 


border-left- 
color: 
black 
border-left- 
width : 
10px 


border-righ 
t-color : 
black 
border-righ 
t-width : 
15px 


border-top- 
width : 
10px 
border-top- 
color : blue 


border-bottom: border-bottom-color 


border-bottom-width 


border-decoration-break 


maintain consistent design amongst 
fragments of broken element 
slice/clone 


border-radius border-top-right-radius 2px 


border-bottom-right-radius 
border-bottom-left-radius 
border-top-left-radius 


border-image 


6. Box Model 

Property Values 

float left | right | none 
height auto length % 


max-height none length % 

max-width none length % 

min-height none length % 

min-width auto % length 
6.1. margin 

Property Values 


margin-bottom auto/length % 


2?%/stretch/repeat/round/none 


Example 

float : right 

height : 10px 
max-height : 10px 
max-width : 120% 
min-height : 50% 


min-width : 30px 


Example 


margin-bottom : 20px 


border-bott 
om-color : 
black 
border-bott 
om-width : 
15px 


border-dec 
oration-bre 
ak: slice; 


border-top- 
left-radius : 
20px 


border-ima 
ge : repeat 
border-ima 
ge : 12px 


margin-left 


auto/height % margin-left : auto 


margin-right auto/height % margin-right : 30% 


margin-top auto/length % margin-top : 40mm 
6.2. padding 

Property Values 

padding- length % 

bottom 

padding-t length % 

op 

padding-r length % 

ight 

padding-| length % 

eft 

display none/inline/block/inline-block/list-item/run-in/compact/table/inline-table 


marquee 
-direction 


marquee 
-loop 


marquee 
-play-cou 
nt 


marquee 
-speed 


/table-row-group/table-headergroup/table-footer-group/table-row/table- 
column-group/table-column/table-cell/table-caption/ruby/ruby-base/rub 
y-text/ruby-base-group/ruby-text-group 


forward/reverse 


infinite/integer 


infinite/integer 


slow/normal/fast 


Example 


padding- 
bottom : 
20px 


padding-t 
op : 20px 


padding-r 
ight : 
20px 


padding-| 
eft : 20px 


display : 
inline 


marquee 
-direction 
: forward 


marquee 
-loop : 10 


marquee 
-play-cou 
nt : 50 


marquee 
-speed : 
slow 


marquee 
-style 


overflow 


overflow- 
style 


overflow- 
x 


rotation 


rotation-p 
oint 


visibility 


clear 


scroll/slide/alternate 


marquee 
-style : 
scroll 


visible/hidden/scroll/auto/no-display/no-content/overflow-x/overflow-y overflow 


auto/marquee-line/marquee-block 


visible/hidden/scroll/auto/no-display/no-content 


angle 


position (paired value off-set) 


visible/hidden/collapse 


left/right/both/none 


7. Template layout 


Property 


box-align 


Values 


start/end/center/base 


box-direction normal/reverse 


box-flex 


normal 


box-flex-group integer 


box-lines 


box-orient 


box-pack 


box-sizing 


single/multiple 
horizontal/vertical/inline-axis/block-axis 
start/end/center/justify 


content-box/padding-box/border-box/margin-box 


: visible 


overflow- 
style : 
auto 


overflow- 
X : scroll 


rotation : 
20deg 


rotation-p 
oint : 
50% 
50% 


visibility: 
hidden 


clear: left 


Example 

box-align : start 
box-direction : normal 
box-flex : normal 
box-flex-group : 2 
box-lines : single 
box-orient : inline 
box-pack : justify 


box-sizing : margin-box 


tab-side top/bottom/left/right 


8. Table 
Property Possible values 


border-collaps __collapse/separate 
e 


empty-cells show/hide 
border-spacing ?%/?px 
table-layout auto/fixed 


caption-side top/bottom/left/right 


9. Columns 
Property Values 


column-co auto/number 
unt 


column-fill auto/balance/balance-all 


column-ga_ normal/?px 
p 


column-rul — thin/medium/thick/?px 
e-width 


column-rul border-style — dotted/solid/hidden/double/ 
e-style dashed/groove/hidden/inset/outset/inherit 


column-rul color 
e-color 


column-wi auto/?px 
dth 


column-sp © 1/all 
an 


10. Colors 


tab-side : left 


Example 


column-count : 10 


column-fill : balance 


column-gap : 5px 


column-rule-width : medium 


column-rule-width : 2px 


column-rule-style : dotted 


column-rule-color : black 


column-width : 10px 


column-span : all 


Property 
color 


Opacity 


Values Example 
inherit/color color : green 


inherit/number level opacity : 4 


11. Grid positioning 


Property 


Values Example 


grid-columns — none/inherit/?px/?%/x%-y% — grid-columns : 10px 


grid-rows 


none/inherit/? px/?%/x%-y% — grid-rows : 40% 


12. List and Markers 


Property 


list-style-t 
ype 


list-style- 
position 


list-style-i 
mage 


marker-of 
fset 


Values 


none/asterisks/box/check/circle/diamond/disc/hyphen/square/decimal/decimal-lea 

ding-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/lower-greek/lower-la 
tin/upper-latin/nebrew/armenian/georgian/cjk-ideographic/hiragana/katakana/hirag 
ana-iroha/katakana-iroha/footnotes 


Example: 


{ list-style-type : upper-roman} 


2%/?Dx 
Example: 


list-style-position : 20px 


none/url 
Example: 


list-style-image : url(‘hackrhome.gif’); 


auto/?px 


Example: 


marker-offset : auto 


13. Animations 


Property 


animation-nam 
e 


animation-durat 
ion 
animation-timin 


g-function 


animation-dela 
y 


animation-iterat 
ion-count 


animation-direc 
tion 


animation-play- 
state 


animation-fill-m 
ode 


14. Outline 


Values 


none/ID 


time 


ease/linear/ease-in/easeout/ease-in-out/cubic-Bezie 


r(number, number, number, number) 


time 


inherit/number 


normal/alternate 


running/paused 


None/backwards/ forwards/both/initial/inherit 


Property Values 


outline-col Color name 


or 


outline-sty none/dotted/dashed/solid/double/groove/ridge/inset/out 


le set 


outline-wi — thin/medium/thick/?px 


dth 


outline-off inherit/?px 


set 


Example 


animation-name : 
myfirstanim 


animation-duration : 
5s 


animation-timing-fun 
ction : linear; 


animation-delay : 
Sms 


animation-iteration-c 
ount: 5 


animation-direction : 
alternate 


animation-play-state 
: running 


animation-fill-mode : 
both 


Example 


outline-color : green 


outline-style : solid 


outline-width : medium 


outline-width : 20px 


outline-offset : 15px 


15. Hyperlink 


Property 
target-name 
target-new 


target-position 


Values 
current/root/parent/new/modal/"string" 
tab/window/none 


front/back/above/behind 


16. Paged Media 


Property 
fit 
fit-position 


orphans 


Values 


fill/hidden/meet/slice 


Example 
target-name : parent 
target-new : window 


target-position : front 


Example 


fit : fill 


top/center/bottom or left/center/right ?%/?px __fit-position : top 35% 


integer 


image-orientation auto/angle (deg/rad/turn/grad) 


page 


auto/id 


page-break-after  auto/always/avoid/left/right 


page-break-befor auto/always/avoid/left/right 


e 


page-break-inside auto/avoid 


size 


windows 


auto/landscape/portrait/? px 


integer 


17. Positioning 


Property 


bottom/right/top/left auto/%/length 


z-index 


clip 


orphans : 4 
image-orientation : Ograd 
page : auto 


page-break-after : 
always 


page-break-before: left 
page-break-inside : 
avoid 

Size : landscape 


Windows : 4 


Values Example 


bottom: 20% top : auto left : 40px right : 


25px 
auto/number z-index : 2 
shape/auto clip : auto 


position fixed/static/relative/absolut position : static 


e 

18. Transitions 
Property Values Example 
transitions-del time (ms/s) transitions-delay : 
ay 20ms 
transitions-dur — time (ms/s) transitions-duration : 
ation 2s 
transitions-pro —_ none/all transitions-property: 
perty none 


transition-timin ease/linear/ease-in/ease-out/ease-in-out/cubicBezi _ transition-timing-functi 
g-function er(number, number, number, number) on: ease-in-out; 


19. 3D / 2D Transform 


Property Values Example 
backface-v _ visible/hidden backface-visi 
isibility bility : hidden 
perspectiv length | none | initial | inherit perspective : 
e 100px 
perspectiv — [ [?%/?px/left/center/right ] [?%/?px/top/center/bottom ]] ?px J/[[[ perspective-o 
e-origin left/center/right ] or [ top/center/bottom ] ] ?px ] rigin : 10px 
30px 
perspective-o 
rigin : 10% 
30% 
perspective-o 
rigin : left 
center; 


transform none/matrix/matrix3d/translate3d/tranlateX/translateY/translateZ/ transform: 


scale/ skewy(40deg 
scale3d/scaleX/scaleY/scaleZ/rotate/rotate3d/rotateX/rotateY/rot _); transform: 
ateZ/ scalex(10); 


skewX/skewY/skew/perspective transform: 


rotate(50deg) 


transform- [ [ [ ?%/?px/left/center/right ] [ ?%/?px/top/center/bottom ]? ] transform-ori 

origin <length> ]/[ [ [ left/center/right ] or [ top/center/bottom ] ] ?px ] gin : 20% 
50%; 
transform-ori 
gin : center; 
transform-ori 
gin : 20px 
50px; 

transform- _ flat/preserve-3d transform-sty 

style le: 
preserve-3d 

21. Speech 

Property Values Example 

cue-before — play a _—_ url [ silent | x-soft | soft | medium | loud | Voice; 

sound file before an x-loud | none | inherit] 

element 

cue-after - play a url [ silent | x-soft | soft | medium | loud | .VOICe; 

sound file after an x-loud | none | inherit] 

element 

pause Time pause: 25ms 


pause-before 


pause-after 


phonemes — give a 
phonetic 
pronunciation to 
elements 


voice-stress 


<time> | none | x-weak | weak | medium | 
strong | x-strong 


<time> | none | x-weak | weak | medium | 
strong | x-strong 


<string> 


normal | strong | moderate | none | reduced 


pause-before : 25ms 


pause-after : 25ms 


#computer 


voice-stress : 
moderate; 


voice-pitch 


voice-duration 


voice-volume 


voice-family 


voice-rate 


speak 


caption-side — 
position for table 
caption 


rest-before 


rest-after 


22. Pseudo-class 


Property 
‘active 
‘focus 
‘link 
“enabled 


:disabled 


<frequency> && absolute | [[x-low | low | 
medium | high | x-high] || [<frequency> | 
<semitones> | <percentage>]] 


auto | <time> 


silent | [[x-soft | soft | medium | loud | x-loud] 
|| <decibel>] 


[[<name> | <generic-voice>],]* [<name> | 
<generic-voice>] | preserve <generic-voice> 
= [<age>? <gender> <integer>?] 


[normal | x-slow | slow | medium | fast | x-fast] 
|| <percentage> 


none | normal | spell-out | digits | 
literal-punctuation | no-punctuation | 
inherit-number 


top | bottom | left | right | inherit 


<time> | none | x-weak | weak | medium | 
strong | x-strong 


<time> | none | x-weak | weak | medium | 
strong | x-strong 


Meaning 

the active element 
Element in focus 

an unvisited link 

an element when enabled 


an element when disabled 


voice-pitch: high; 
voice-pitch: 350hz; 
voice-pitch: 45% 


voice-duration: auto; 
voice-duration: 60s; 


voice-volume: 25db; 
voice-volume: silent; 
voice-volume: soft; 


voice-family : “child”, 
“female” 


voice-rate: slow; 
voice-rate: 30%; 


speak : none; 


caption-side: left; 


rest-before: medium; 
rest-before: 20ms; 


rest-after: medium; 
rest-after: 20ms; 


‘hover element when you mouse over 


:checked Checked element 

selection an element currently selected or highlighted by the user 

‘lang allows the author to specify a language to use in a specified 
element 

:nth-child(n) an element that is the nth sibling 

:nth-last-child(n) an element that is the nth sibling counting from the last sibling 

:‘first-child first sibling 

‘last-child last sibling 

:only-child only child element 

:nth-of-type(n) an element that is the n-th sibling of its type 


:nth-last-of-type(n) n-th sibling of its type counting from the last sibling 


‘first-of-type first sibling of its type 

‘last-of-type an element that is the last sibling of its type 
:only-of-type only child of its type 

‘empty Element with no children 

‘root Root element of the document 

‘target Target specified by a URL 

:not(x) element not represented by the argument ‘x’ 


23. Pseudo-element 
Property Meaning Example 


ifirst-lett | Adds special style to the first letter p::first-letter { font-size: 150%; color: 
er of a text #FFFOO; } 


ifirst-line Adds special style to the first line of — p::first-letter{ font-size: 150%; color: 
a text black; } 


::before Inserts some content before an p::before { content: "Welcome to hackr: "; 


element } 
:iafter Inserts some content after an p::after { content: "Thank you for 
element watching"; } 


Absolute Measurements 


Symbol Representation 


% percentage 

ms millisecond 

Ss second 

in inches 

mm millimetre 

cm centimetre 

pt point (1/72 inch) 
pc pica (12 points) 


24. Angles/Time/Frequency 


Unit Representatio 
n 


deg degree 
grad gradient 
rad radian 
turn — turns 


ms millisecond 


s second 
Hz hertz 
khz — kilohertz 


25. Relative measurement 


Unit Representation 


px pixel of the device 


gd grid defined by layout-grid 


em font size of current element 


rem _ font size of root element 


ex x-height of the element’s font 


vh viewport height 


vm viewport height or width (lower value) 


Vw viewport width 


26. Selector types 


Type 
class 

id 
universal 
group 
type 


tree 
descendant 


child 


sibling 
adjacent 
general 


Meaning 

multiple elements of various types 
single element 

applicable to all elements 

apply style to multiple elements 


element of the specified type 


element that is below another (any level) 


element one below the parent element 


adjacent share the same parent and in the same immediate 
sequence general share the same parent but can be in any 


sequence 


27. Generated content 


Property 


Value 


Example 


Example 
.class 


#id 


elementnam 
eh3 


# 
elementnam 
e>h3 


h2 + ph2~ 
p 


bookmark-label 
bookmark-level 
bookmark-target 
counter-reset 
crop 

display 

content 
float-offset 
hyphenate-after 
hyphens 


hyphenate-lines 


hyphenate-resource 


hyphenate-before 


hyphenate-characte 


r 


counter-increment 


marks 

move-to 
image-resolution 
page-policy 
quotes 
string-set 


text-replace 


28. Line box 


Content/attr/label string 
None/integer 

Self/url/attr 
None/number 
Auto/shape 
none/inline/block/inline-block 
normal | none | inhibit url 
length 

auto/integer 
none/auto/manual 
no-limit/integer 


none/url 


auto/integer 


auto/string 


none/number 

crop | cross/none 
normal/here/id 
auto/normal/dpi 
start/first/last 
none/string 

[id string] [id string] 


none [string string] 


bookmark-label : “This is bookmark” 


bookmark-level : 2; 


bookmark-target : url(http://hackr.io); 


counter-reset : 5 

Crop : auto 

Display : block; 

Content : normal 
float-offset : 20px 20px 
hyphenate-after : 15 
hyphens : manual 
hyphenate-lines : no-limit 


hyphenate-resource : 
url(http://nackr.io) 


hyphenate-before : 10 


hyphenate-character : “\1234” 


counter-increment : 10 
marks : crop 

move-to : normal 
image-resolution : auto 
page-policy : last 
quotes : “” “” 

string-set : header content(); 


text-replace : “foo” “bar” 


Property 


alignment- 
adjust 


alignment- 
baseline 


drop-initial 
-after-alig 
n 


drop-initial 
-before-ali 
gn 


drop-initial 
-before-ad 
just 


drop-initial 
-value 


drop-initial 
-size 
baseline-s 
hift 
dominant- 


baseline 


line-stacki 
ng-shift 


line-stacki 
ng-strateg 
y 


Value 


auto | baseline | before-edge | text-before-edge 
| middle | central | after-edge | textafter-edge | 
ideographic | alphabetic | hanging | 


mathematical length | % 


baseline | ise-script | beforeedge | 
text-before-edge | afteredge | text-after-edge | 
central | middle | ideographic | alphabetic | 


hanging | mathematical 


central | middle | after-edge | text-after-edge | 
ideographic | alphabetic | mathematical | % 


caps-height | <alignment-baseline> 


before-edge | text-before-edge | central | middle 
| hanging | mathematical | length | % 


initial integer 


auto integer % line 


sub | super | length % 


baseline/hanging/middle 


consider-shifts | disregard-shifts 


inline-line-height | block-line-height | max-height 


| grid-height 


Example 


alignment-adjust : middle 


alignment-baseline : hanging 


drop-initial-after-align : 30% 


drop-initial-before-align : 
central 


drop-initial-before-adjust : 10px 
drop-initial-before-adjust : 10% 
drop-initial-before-adjust : 
middle 


drop-initial-value : 20 


drop-initial-size : 25% 


baseline-shift : super 


dominant-baseline : middle 
x=25 y = 50 


line-stacking-shift : 


disregard-shifts 


line-stacking-strategy: 
max-height 


inline-box- 
align 


line-height 
text-height 


vertical-ali 
gn 


Initial | last| integer 


Normal/number/ length/ % 
auto | font-size | text-size | max-size 


Baseline | sub | super | top | text-top | middle | 
bottom | text-bottom length | % 


inline-box-align : 2 
inline-box-align : initial 


line-height : 30% 
text-height : auto 


vertical-align : middle 


